<template>
  <div class="home">
    <div class="home-top">
      <img
        class="home-img"
        src="https://image.java.crmeb.net/crmebimage/public/operation/2021/09/23/aa6e46fd9fbd424e8cb636a34db50176nj0e4r0f6o.png"
        alt=""
      >
      <form class="from-search">
        <van-search
          v-model="value"
          placeholder="搜索商品"
          class="van-search"
          @click="tosearch"
        />
      </form>
    </div>
    <div class="lunbotu">
      <van-swipe :autoplay="3000">
        <van-swipe-item
          v-for="(image, index) in images"
          :key="index"
        >
          <img
            v-lazy="image.pic"
            class="aaa"
          />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="lunList">
      <img
        src="https://image.java.crmeb.net/crmebimage/change/new_header/new_header4.png"
        alt=""
      >
      <div id="box">
        <ul
          id="con1"
          ref="con1"
          :class="{anim:animate==true}"
        >
          <li
            v-for='item in items'
            :key="item.id"
          >{{item.info}}</li>
        </ul>
      </div>

    </div>
    <van-grid :column-num="5">
      <van-grid-item
        v-for="(grid,index) in grids"
        :key="index"
        :icon="grid.pic"
        :text="grid.name"
        :to="grid.url"
      />
    </van-grid>
    <div class="lqyhq">
      <div class="lqyhq-top">
        <h3>
          领取优惠券
        </h3>
        <span>
          查看更多>
        </span>
      </div>
    </div>
    <div class="lqyhq-item">
      <shouyelqyhq></shouyelqyhq>
    </div>
    <div class="xhms">
      <!-- <xianshimiaosha></xianshimiaosha> -->
    </div>
    <combination ></combination>
    <bargain></bargain>
    <product></product>
  </div>

</template>
<script>
import shouyelqyhq from "../../components/shouyelqyhq.vue"
// import xianshimiaosha from '@/components/xianshimiaosha.vue'
import combination from "@/components/combination.vue"
import bargain from "@/components/bargain.vue"
import product from "@/components/product.vue"
export default {
  data() {
    return {
      value: "",
      images: [],
      animate: false,
      items: [],
      grids: [],
    
    }
  },
  methods: {
    async getLunbo() {
      const res = await this.$http.getLunbo()

      this.images = res.data.data.banner
      this.items = res.data.data.roll
      this.grids = res.data.data.menus
      console.log(this.grids);
    },


    scroll() {
      this.animate = true; // 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置true
      setTimeout(() => {
        //  这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多
        this.items.push(this.items[0]); // 将数组的第一个元素添加到数组的
        this.items.shift(); //删除数组的第一个元素
        this.animate = false; // margin-top 为0 的时候取消过渡动画，实现无缝滚动
      }, 1000);
    },
    // 跳转搜索页面
    tosearch() {
      this.$router.push("/goods_search");
    },
  },
  created() {
    this.getLunbo();
    setInterval(this.scroll, 1000);

  },
  components: {
    shouyelqyhq,
    // xianshimiaosha
    combination,
    bargain,
    product
  }
};
</script>
<style lang="scss">
.home{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: -webkit-linear-gradient(top, green 1%, #fff 20%);
 
.home-top {
  width: 100%;
  height: 60px;
  // background-color: skyblue;
  display: flex;

  .home-img {
    height: 30px;
    margin: 15px;
  }
  .van-search {
    width: 240px;
    height: 40px;
    border-radius: 50px;
    margin-top: 10px;
  }
}
.lunbotu {
  width: 100%;
  height: 180px;
  // background-color: skyblue;
  img {
    width: 90%;
    
  }
}
.aaa {
  width: 90%;
  height: 180px;
  margin-left: 20px;
}
.lunList {
  width: 90%;
  height: 40px;
  background-color: white;
  margin: auto;
  img {
    height: 20px;
    margin-top: 10px;
  }
}
#con1 {
  width: 200px;
  height: 40px;
  overflow: hidden;
  line-height: 40px;
}
.lunList {
  display: flex;
  justify-content: space-between;
  background-color: white;
  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: 10px;
}
.lqyhq-top {
  display: flex;
  justify-content: space-between;

  align-items: center;
  padding: 10px;
  box-sizing: border-box;
  span {
    font-size: 12px;
    color: #ddd;
  }
}
.lqyhq-top {
  margin-left: 10px;
}
}

</style>